<%@include file="/WEB-INF/common/taglibs.jsp"%>
<input type="hidden" name="product.id" field="productId" op="eq" value="${entity.id}" class="filterdata">

<script type="text/javascript" src="${ctx}/resources/js/datatable-query.js"></script>
<div class="row-fluid">
	<div class="span12">
	<div class="box gradient">
	 
		<div class="title">
				<h4>
				<span>Product Associated Option </span> <span class="box-form right"> </span>
				
				<span class="box-form right productAssociatedOption_bar"><a href="#" class="btn btn-mini addProductAssociatedOption">Add Product Associated Option</a></span>
 				</h4>
 				<a href="#" class="minimize"> </a>
			</div>
		 <div class="content scrollable clearfix">
		<table class="table table-bordered table-vertical-centre productAssociatedOptionTable">
			<thead>
				<tr>
					<th><a class="select_all"><span class="icomoon-icon-checkmark-2"></span></a></th>
<th>SKU </th>
<th>OptionSet </th>
<c:forEach  var="option" items="${entity.optionSet.attrOptions}">
 <th>${option.name } </th>
</c:forEach>
 <th>Quantity </th>
<th>SubtractStock </th>
<th>Price </th>
<th>Point </th>
<th>PointNeed</th>
<th>Weight </th>
<th>OrderRank </th>
<th>Retail Price </th>
<th>Default </th>
  					<th>Action</th>
				</tr>
			</thead>
		</table>
		</div>
	 
</div>
 </div>
</div>




<script>
 
 

$(document).ready(function(){
	var del = {
			id : 'productAssociatedOptionDel',
			text  : 'Del',
			domain : "Product Associated Option",
			operation : "Del",
			url : "${ctx}/admin/product-associated-option/del/",
			selector : ".productAssociatedOption_bar",
			selects  : $('.productAssociatedOptionTable'),
	  
	};
	johnny.tableBtn(del);
	
	
	
	var make_default = {
			id : 'productAssociatedOptionDefault',
			text  : 'Default',
			domain : "Product Associated Option",
			operation : "Make default",
			url : "${ctx}/admin/product-associated-option/default/",
			selector : ".productAssociatedOption_bar",
			max      : 1,
			selects  : $('.productAssociatedOptionTable'),
	  
	};
	johnny.tableBtn(make_default);
	
	
	
	
	$('.addProductAssociatedOption').click(function(){
	$("#productAssociatedOptionDiv").find("div.modal-body").find("input,select,textarea,checkbox").not("[name=action],[type=hidden]").not("[type=radio]").each(function(step,value){
	 									$(value).val("");
	 							});
	
	
	
	 $("#productAssociatedOptionDiv input[name='action']").val("${ctx}/admin/product-associated-option/create/");
 	 $("#productAssociatedOptionDiv").modal('show');
  });
	
	  $(document).delegate('.productAssociatedOptionTable .icomoon-icon-pencil', 'click', function(event) {
		  
		  	var id = $(this).parent().attr("dataid");
			$.ajax({
				url : "${ctx}/admin/product-associated-option/"+id+"/edit/",
				type : "GET",
				dataType : "json",
				success : function(data){		
					if(data && data.state && (data.state.indexOf("ERROR") != -1)){
						johnny.error(data.message);
						return;
					}else{
							var entity = data.entity;
 							$("#productAssociatedOptionDiv").find("div.modal-body").find("input,select,textarea,checkbox").not("[name=action],[type=hidden]").each(function(step,value){
									var name = $(value).attr("name");
									if ($(value).is(':radio')) {
   											if (""+entity[name] ===""+$(value).val()){
  												$(value).attr("checked","checked");
   											}else{
   												$(value).removeAttr("checked");
 																			
 											}
 								    }else{
										if (entity[name] || entity[name]===0){
											$(value).val(entity[name]);
	 										$(value).uniform();
	 									}else if (name.match(/Id$/)){
											var pro = name.substring(0,name.length-2);
											if (entity[pro] &&entity[pro].id){
												$(value).val(entity[pro].id);
		 										$(value).uniform();
	 										}
	 									
										}
										else{
	 										$(value).val("");
										}
								    }
  							});
 							var x = $("#productAssociatedOptionDiv").find("div.modal-body").find('input[type="radio"]');
   							x.uniform();
							
								$(entity.optionValues).each(function(step,value){
									var xxx =	$("select[name=optionValueId] option[value="+value.id+"]");
									
									xxx.parent("select:first").val(value.id);
 									xxx.parent("select:first").uniform();
 										
								});
 							
  							$("#productAssociatedOptionDiv input[name='action']").val("${ctx}/admin/product-associated-option/"+id+"/edit/");
     	    				$("#productAssociatedOptionDiv").modal('show');
 					}
				}
			});		  
 
	     
	    });
	var recordColumn = ['','sku','optionSet',<c:forEach  var="option" items="${entity.optionSet.attrOptions}">
	'',
	 </c:forEach>
	 'quantity','subtractStock','price','point','weight','orderRank','linkKey','marketPrice','defaultValue'];
	
	 $('.productAssociatedOptionTable').dataTable({
		"bLengthChange" : true,
		"aoColumnDefs" : [ {
			'bSortable' : false,
			'aTargets' : [0,3 ]
		} ],
 		"sAjaxSource" : '${ctx}/admin/product-associated-option/',
		"createQueryData" : function (aoData){
				return	johnny.initQueryData(aoData, recordColumn);
		},
		"createResult" : function (json, echo){
 			var dataArray = new Array();
			for ( var i = 0; i < json.result.length; i++) {
				var subArray = new Array();
				var value = johnny.getForSelect(json.result[i].id);
				subArray.push(value);
				subArray.push(json.result[i].sku)
subArray.push(json.result[i].optionSet.name)
 	$(json.result[i].optionValues).each(function(step,value){
 			subArray.push(value.name);
 	});
subArray.push(json.result[i].quantity)
subArray.push(json.result[i].subtractStock)
subArray.push(json.result[i].price)
subArray.push(json.result[i].point)
subArray.push(json.result[i].pointNeed)
subArray.push(json.result[i].weight)
subArray.push(json.result[i].orderRank)
subArray.push(json.result[i].marketPrice)
subArray.push(json.result[i].defaultValue)

   				var conf = [{
					link : 'javascript:void(1)',
					dataId : json.result[i].id,
					text : 'edit',
					css  : 'icomoon-icon-pencil'
				} 
				
				];
				subArray.push(johnny.getGridLink(conf)); 
  				dataArray.push(subArray);
			}
			return {
				sEcho : echo,
				iTotalRecords : json.totalCount,
				iTotalDisplayRecords : json.totalCount,
				aaData : dataArray
			};
		}		
	});
	 
	
	
	
	
});


</script>





<div id="productAssociatedOptionDiv" class="modal hide fade"  selector=".productAssociatedOptionTable" style="display: none; ">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">
			<span class="icon12 minia-icon-close"></span>
		</button>
		<h3>	Product Associated Option  </h3>
	</div>
 
	<div class="modal-body">
  						<input type="hidden" name="action" >
  						<input type="hidden" name="optionSetId" value="${entity.optionSet.id}">
  						<input type="hidden" name="productId" value="${entity.id}">
  						

<c:forEach  var="option" items="${entity.optionSet.attrOptions}">

<!--country --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span4">${option.name }  :</label><div class="span8 controls"><select name="optionValueId"><c:if test="${not empty option.optionValues}"><c:forEach var="single" items="${option.optionValues}"><option value="${single.id}">${single.name}</option></c:forEach></c:if></select></div></div></div></div>


 
</c:forEach>
<!--sku --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span4" for="sku">SKU :</label><input class="span8" id="sku" name="sku"   type="text" value="${entity.sku}" /></div></div></div>
<!--quantity --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span4" for="quantity">Quantity :</label><input class="span8" id="quantity" name="quantity"   type="text" value="" /></div></div></div>
<!--subtractStock --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span4" for="subtractStock">SubtractStock :</label><div class="left marginT5 marginR10"><div class="radio" id="uniform-subtractStock1"><span class=""><input type="radio" name="subtractStock" id="subtractStock1" value="true" style="opacity: 0;"></span></div>True</div><div class="left marginT5 marginR10"><div class="radio" id="uniform-subtractStock2"><span class=""><input type="radio" name="subtractStock" id="subtractStock2" value="false" style="opacity: 0;"></span></div>False</div></div></div></div>
<!--price --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span4" for="price">Price :</label><input class="span8" id="price" name="price"   type="text" value="" /></div></div></div>
<!--point --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span4" for="point">Point :</label><input class="span8" id="point" name="point"   type="text" value="" /></div></div></div>
<!--pointNeed --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span4" for="pointNeed">Point Need :</label><input class="span8" id="pointNeed" name="pointNeed"   type="text" value="" /></div></div></div>
<!--weight --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span4" for="weight">Weight :</label><input class="span8" id="weight" name="weight"   type="text" value="" /></div></div></div>
<!--orderRank --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span4" for="orderRank">OrderRank :</label><input class="span8" id="orderRank" name="orderRank"   type="text" value="" /></div></div></div>


<!--marketPrice --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span4" for="marketPrice">MarketPrice :</label><input class="span8" id="marketPrice" name="marketPrice"   type="text" value="" /></div></div></div>
						 
	</div>
	 
	<div class="modal-footer">
		<a href="#" class="btn" data-dismiss="modal">Close</a>
		<a href="#" class="btn btn-primary modal-submit">Save changes</a>
	</div>

</div>




